blob: 39c0bb50bccb51da8d35ce2dc5343b60cd992ba0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import Seo from '@/core/components/Seo'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import { getIdFromSlug } from '@/core/utils/slug'
import useBlog from '@/lib/blog/hooks/useBlog'
import { useRouter } from 'next/router'
import dynamic from 'next/dynamic'
const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
export default function BlogDetail() {
const router = useRouter()
const { slug = '' } = router.query
const id = getIdFromSlug(slug)
const { blog } = useBlog({ id })
const parsedContent = blog.data?.content?.replaceAll(
'src="/web/image',
`src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
)
const contentClassNames = `
prose
prose-gray
prose-a:text-danger-500
prose-a:no-underline
prose-p:my-4
prose-headings:mt-6
prose-headings:mb-3
prose-headings:font-medium
prose-h1:text-title-sm
prose-h2:text-h-md
prose-img:my-0
prose-img:mb-1
prose-img:inline-block
prose-hr:my-3
max-w-none
`
return (
<BasicLayout>
<Seo title={`${blog.data?.title} - Indoteknik.com`} />
{blog.isLoading && (
<div className='flex justify-center my-6'>
<Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
</div>
)}
{blog.isFetched && (
<div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
<h1 className='text-title-sm md:text-title-md font-semibold mb-2 leading-10'>
{blog.data?.title}
</h1>
<h2 className='leading-6 text-gray_r-12/90 mb-8'>
Diposting pada tanggal {blog.data?.postDate}{' '}
{blog.data?.category?.id && `di ${blog.data?.category?.name}`}
</h2>
<article
className={contentClassNames}
dangerouslySetInnerHTML={{ __html: parsedContent }}
/>
</div>
)}
</BasicLayout>
)
}
|
